<template>
	<view>
		<view class="">
			<view class="wrap">
				<u-swiper :list="lunbolist" :effect3d="true" bg-color="" height="350"></u-swiper>
			</view>
			<!-- 宮格 -->
			<view class="gongge">
				<view class="smallgongge" v-for="(item,index) in gglist" :key="index" @click="leixing(item)">
					<van-image round width="109rpx" height="109rpx" :src="item.img" />
					<view class="leixing">
						{{item.name}}
					</view>
				</view>
			</view>
			<!-- <view class="qianquan">
				<image src="../../static/image/4.png" mode=""></image>
			</view> -->
			<view class="hr">
			</view>
		</view>

		<view class="yijiantitle">
			推荐商品
		</view>

		<!-- 推荐的商品 -->
		<view class="Modkelistbox">
			<Modkelist :listarr="list" @tiaozhuan="prodect"></Modkelist>
		</view>

	</view>
</template>
<script>
	import {
		getintegralindex
	} from "../../api/api/index.js"
	import Modkelist from "../../components/Modkelist/index.vue"
	export default {
		data() {
			return {
				// 头部导航栏
				background: {
					backgroundImage: "linear-gradient(90deg, #FF7E65, #FF3335)"
				},
				// 轮播图
				lunbolist: [],
				// 宫格数据
				gglist: [],

				// 推荐的商品
				loadStatus: 'loadmore',
				flowList: [],
				list: []
			}
		},
		methods: {
			prodect(e) {
				this.jumpLink({
					link: "/pagesB/jfproductxq/index",
					query: {
						id: e.id
					}
				})
			},
			pubic() {
				getintegralindex().then(res => {
					// 轮播图
					this.lunbolist = res.data.banner.map(v => {
						v.image = v.img
						return v
					})
					// 宫格数据
					this.gglist = res.data.type
					this.list = res.data.commodity
				})
			},
			// 类型
			leixing(v) {
				this.jumpLink({link:"/pagesB/jfproduct_list/index",query:{id:v.id}})
			}
		},
		onLoad() {
			// this.addRandomData();
		},
		onShow() {
			this.pubic()
		},
		components: {
			Modkelist
		}
	}
</script>
<style scoped lang="scss">
	.box {
		width: 100%;
		margin: auto;
		overflow: hidden;
		height: 480rpx;

		.home_top {
			position: relative;
			width: 100%;
			height: 400rpx;

			.wrap {
				// padding: 30rpx;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				box-sizing: border-box;
				z-index: 100;
			}

			.iptbox {
				margin-bottom: 20rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				width: 705rpx;
				border-radius: 80rpx;
				height: 80rpx;
				background: rgba(255, 255, 255, .3);
				padding-left: 20rpx;
				box-sizing: border-box;
				margin: 0 auto;

				input {
					color: #FFFFFF;
					width: 600rpx;
				}
			}
		}

		.home_top:after {
			width: 140%;
			height: 400rpx;
			position: absolute;
			left: -20%;
			top: 0rpx;
			z-index: -1;
			content: '';
			border-radius: 0 0 50% 50%;
			background: linear-gradient(90deg, #FF7E65, #FF3335);
		}
	}

	.informbox {
		display: flex;
		margin-left: 18rpx;
		align-items: center;

		image {
			width: 82rpx;
			height: 32rpx;
		}

		.tuijian {
			height: 26rpx;
			width: 57rpx;
			border-radius: 56rpx;
			font-size: 18rpx;
			font-family: Source Han Sans CN;
			line-height: 26rpx;
			text-align: center;
			color: #FF3939;
			background-color: #FFDDD7;
			margin-left: 10rpx;
		}

		.barbox {
			width: 600rpx;
		}
	}

	.gongge {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.smallgongge {
			margin-left: 39rpx;
			margin-right: 39rpx;
			margin-top: 30rpx;

			.leixing {
				text-align: center;
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				color: #282828;
			}
		}
	}

	.qianquan {
		width: 100%;
		margin-top: 80rpx;

		image {
			width: 729rpx;
			height: 275rpx;
		}
	}

	.hr {
		width: 100%;
		height: 15rpx;
		background: #ECECEC;
	}

	.yijiantitle {
		font-size: 36rpx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		text-align: center;
		color: #000000;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}



	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 26rpx;
		margin-top: 5px;
		color: #000000;
	}

	.demo-pricebox {
		margin-top: 23rpx;

		.jifennum {
			color: #e13c35;
			font-size: 30rpx;
			font-weight: 700;
		}

		.jifen {
			font-family: PingFang-SC-Medium;
			font-size: 18rpx;
			color: #838383;
			margin-left: 15rpx;
		}

		// display: flex;
		// justify-content: space-between;

		// .price {
		// 	font-family: PingFang-SC-Heavy;
		// 	font-size: 30rpx;
		// 	color: #e13c35;

		// 	.danwei {
		// 		font-size: 18rpx;
		// 	}
		// }

		// .xiaolian {
		// 	font-family: PingFang-SC-Medium;
		// 	font-size: 18rpx;
		// 	color: #838383;
		// }
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
</style>
